---
image: /generated/articles-docs-audio-importing.png
title: Importing Audio
sidebar_label: Importing Audio
id: importing
crumb: 'Audio'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

[Put an audio file into the `public/` folder](/docs/assets) and use [`staticFile()`](/docs/staticfile) to reference it.  
Add an [`<Html5Audio/>`](/docs/html5-audio) tag to your component to add sound to it.

```tsx twoslash title="MyComp.tsx"
import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};
```

You can also add remote audio by passing a URL:

```tsx twoslash title="MyComp.tsx"
import {AbsoluteFill, Html5Audio} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};
```

By default, the audio will play from the start, at full volume and full length.  
You can mix multiple tracks together by adding more audio tags.
